<ion-header>
    <ion-toolbar mode="ios" color="care">
      <ion-buttons>
        <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
      <ion-title>{{ 'DetailedInfo' | translate }}</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div style="height: 200px;width:100%; text-align: center;padding-top: 50px">
      <ion-avatar style="margin: 0 auto;width: 100px;height: 100px;">
        <ion-img style="width: 100px;height: 100px;" [src]="hospitalUserInfo.avatar_url || '/assets/img/icondoctor.png'">
        </ion-img>
      </ion-avatar>
      <ion-label>{{hospitalUserInfo.nickname}}</ion-label>
    </div>

    <div class="profiles">
      <ion-item>
        <ion-label color="care">{{ ['RegistrationFees', 'BookingCost'][hospitalUserInfo.type - 2] | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{hospitalUserInfo.order_price}}</ion-text>
      </ion-item>

      <ion-item>
        <ion-label color="care">{{ 'Region' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{hospitalUserInfo.region_name}}</ion-text>
      </ion-item>

      <ion-item detail (click)="showPI()">
        <ion-label color="care">{{ 'HospitalInfo' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{ 'Details' | translate}}</ion-text>
      </ion-item>

      <ion-item detail (click)="showTestingProject()">
        <ion-label color="care">{{ 'TestingCost' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{ 'Details' | translate}}</ion-text>
      </ion-item>

      <ion-item detail (click)="showMQ()">
        <ion-label color="care">{{ ['MedicalQualifications', 'HospitalQualifications'][hospitalUserInfo.type - 2] | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
      </ion-item>

      <!--<ion-item detail (click)="showPH()">
        <ion-label color="care">{{ 'PersonalHonors' | translate }}</ion-label>
        <ion-text color="medium" slot="end">{{ 'Details' | translate}}</ion-text>
      </ion-item>-->

      <ion-item lines="none" *ngIf="!!hospitalUserInfo.video_url">
        <ion-label color="care" position="stacked">
          <h3>
            {{ 'RideoInfo' | translate }}
          </h3>
        </ion-label>
        <video [src]="hospitalUserInfo.video_url" controls="controls" preload="auto" width="320" height="240"
               style="margin: 20px auto"></video>
      </ion-item>
    </div>

    <ion-button shape="round" color="care" expand="block" class="defaultButton appointment-button"
                *ngIf="hasOrder === 1"
                (click)="appointmentNow()">{{'AppointmentNow' | translate}}</ion-button>

    <ion-button shape="round" color="danger" expand="block" class="defaultButton appointment-button"
                *ngIf="orderId && orderAccept === 1"
                (click)="cancelAppoint()">{{'CancelAppoint' | translate}}</ion-button>
  </ion-content>
